import React, { useEffect, useRef } from 'react';
import styled from 'styled-components'
import { withRouter } from 'react-router-dom'
// 如何让一个没有经过路由包装的组件能具备 路由信息

// search搜索框
const SearchCity = (props: any) => {

  const inputRef: any = useRef()

  const onSubmit = (e: any) => {
    console.log("e", e)
    e.preventDefault()
    console.log("inputReft: ", inputRef.current.value.trim())
    featchCity('k')
    inputRef.current.value = ''
  }

  const featchCity = (key: string) => {
    fetch(`/rest/search?key=${key}`)
      .then(res => res.json())
      .then(data => {
        console.log("data:", data)
      })
  }

  // 合成事件：事件绑定对象在哪？document上 <- input
  // 冒泡：
  // 事件委托：
  // onClick onScroll onChange ...

  // 但是：react新版本： 父元素上
  // const onChange = (e: any) => {
  //   console.log(e.target.value, 'e')
  // }

  // back返回按钮  input  ajax请求数据  防抖处理
  console.log("props:", props)
  return <SearchWrapper className="search-wrapper">
    <div className="search-left"
      onClick={() => {
        props.history.goBack()
      }}
    > back </div>
    <div className="search-right">
      <form onSubmit={onSubmit}>
        <input type="text" ref={inputRef} />
      </form>
    </div>
  </SearchWrapper>
}

// 高阶组件
// withRouter(SearchCity) 
export default withRouter(SearchCity);

const SearchWrapper = styled.div`
  height: 45px;
  display:flex;
  background: #ccc;
  position: sticky;
  top: 0;
  .search-left {
    flex: 2;
    display:flex;
    justify-content: center;
    align-items:center;
  }
  .search-right{ 
    flex:8;
    display:flex;
    justify-content: center;
    align-items:center;
    input {
      width: 80%;
      height: 80%;
      background: #eee;
      border-radius:10px;
      border:none;
      outline:none;
    }
  }
`
